<script setup lang="ts">
  const randomColor = () => {
    var r = Math.floor(Math.random() * 256)
    var g = Math.floor(Math.random() * 256)
    var b = Math.floor(Math.random() * 256)
    return 'rgb(' + r + ',' + g + ',' + b + ')'
  }
  /**
   *@description 绘制元素
   *
   */
  const drawCirclef = async (stage: any) => {
    const configLimit = {
      rmax: 50,
      rmin: 10
    }
    const x = Math.random() * 400 + 10
    const y = Math.random() * 400 + 10
    const mx = Math.random() * 400 - 200
    const my = Math.random() * 400 - 200
    const shape = new createjs.Shape()
    shape.graphics
      .beginFill(randomColor())
      .drawCircle(
        x,
        y,
        Math.random() * (configLimit.rmax - configLimit.rmin) + configLimit.rmin
      )
    shape.alpha = 0
    stage.addChild(shape)

    //动画
    const handleComplete = () => {
      stage.removeChild(shape)
    }
    new createjs.Tween(shape, { loop: true })
      .to({ alpha: 1 }, 1000, createjs.Ease.quadOut)
      .to({ x: mx, y: my }, 3000, createjs.Ease.getPowInOut(4))
      .call(handleComplete)
    stage.update()
    setTimeout(() => {
      drawCirclef(stage)
    }, 100)
  }

  const init = () => {
    const stage = new createjs.Stage('circleCavcas')
    createjs.Ticker.setFPS(60)
    createjs.Ticker.addEventListener('tick', stage)
    drawCirclef(stage)
  }

  onMounted(() => {
    nextTick(() => {
      init()
    })
  })
</script>

<template>
  <div>
    <canvas
      id="circleCavcas"
      width="500px"
      height="500px"
      style="background-color: red"
    ></canvas>
  </div>
</template>

<style scoped lang="scss"></style>
